//验证登录
//通过登录"凭证"来判断是否登录成功
//1.拿到localStorage内的凭证
const token = window.localStorage.getItem('token'),
    uuid = window.localStorage.getItem('uuid');

//2.判断token和uuid是否存在
if (!token || !uuid) {
    //表示还没有登录过，需要跳转到登录页登录
    $('.off').addClass('active');
    $('.on').removeClass('active');
} else {
    //表示登录过，需要展示登录后的信息
    getInfo();
}

//3.请求用户信息
function getInfo() {
    //发送用户请求
    $.ajax({
        url: 'http://hn216.api.yesapi.cn/?s=App.User.Profile',
        method: "GET",
        data: {uuid: uuid, token: token, app_key: '4DEDF61ED746BDF7FF3B924686226D93'},
        success(res) {
            if (res.data.err_code === 0) {
                $('.on').addClass('active').find('span').html(res.data.info.ext_info.nick);
                $('.off').removeClass('active');
            }
        }
    })
}

//4.退出登录，直接刷新页面
$('.logout').on('click', function () {
    //直接发送请求，退出登录
    $.get('http://hn216.api.yesapi.cn/?s=App.User.Logout', {
            uuid: uuid,
            token: token,
            app_key: '4DEDF61ED746BDF7FF3B924686226D93'
        },
        () => {
            //退出登录后，直接刷新页面
            window.localStorage.clear();
            window.location.href = '../html/list.html'
        })
})


//列表页的逻辑代码
//1.请求分类列表，渲染分类位置内容
let token2 = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImNyZWF0ZWQiOjE2NDAzNDMyMTc5MTMsImV4cCI6MTY0MDk0ODAxN30.ccEPFx4R9Jb2H_DoBsRUx2DBXk_ALDMVNbCePFwh2mdBu5DvPm7RFvaYZBBU6yYMFhGrgVrnmpNPHk7exGhDxA';
let data;
let children;
let parentCategoryID;
let parentList;
let childrenCategoryID;
let childrenList;
let ID = '';
let brandID = '';
let brandList;

//active类名回归全部函数
function firstActive(index) {
    $(parentList[index]).addClass('active').siblings().removeClass('active');
    $('.childCategory').html(`<li class=\"active\">全部</li><span>|</span>`)
    $(brandList[index]).addClass('active').siblings().removeClass('active');
}

function showChildren(index) {
    let strChild = `<li class=\"active\">全部</li><span>|</span>`;
    if (data.length > index) {
        children = data[index].children;
        for (let j = 0; j < children.length; j++) {
            let childrenI = children[j];
            strChild += `<li>${childrenI.name}</li><span>|</span>`;
        }
        //js追加html完成后回调
        $('.childCategory').html(strChild).promise().done(function () {
            //获取二级分类的全部li
            childrenList = document.querySelectorAll(".childCategory>li");
            //需要延迟一下再去拿list的内容，否则没等挂载完数据便提前提取数据
            setTimeout(function () {
                for (let i = 0; i < childrenList.length; i++) {
                    childrenList[i].index = i;
                    //让二级分类所有选项都绑定点击事件
                    childrenList[i].onclick = function () {

                        //二级分类按钮点击颜色渲染
                        $(this).addClass('active').siblings().removeClass('active');

                        //获取二级分类按钮id值
                        if (i > 0) {
                            childrenCategoryID = children[i - 1].id;
                            ID = childrenCategoryID;
                        } else {
                            ID = parentCategoryID;
                        }
                        //将获取的id值赋值给info中的productCategoryId
                        info.productCategoryId = ID;
                        info.pageNum = 1;
                        //拿到新productCategoryId值后重新获取一次商品列表
                        getProductList();
                    }
                }
            }, 50)
        });
    } else {
        $('.childCategory').html(strChild)
    }
}

getCateList()

function getCateList() {
    $.ajax({
        url: 'http://admin-api.macrozheng.com/productCategory/list/withChildren',
        method: "GET",
        headers: {
            Authorization: token2
        },
        success: function (res) {
            data = res.data;
            let str = `<li class=\"active\">全部</li><span>|</span>`;
            for (let i = 0; i < data.length; i++) {
                let dataI = data[i];
                //循环遍历拼接元素
                str += `<li>${dataI.name}</li><span>|</span>`;
            }
            //js追加html完成后回调
            $('.category').html(str).promise().done(function () {
                //获取一级分类的全部li
                parentList = document.querySelectorAll(".category>li");
                //需要延迟一下再去拿list的内容，否则没等挂载完数据便提前提取数据
                setTimeout(function () {
                    for (let i = 0; i < parentList.length; i++) {
                        parentList[i].index = i;
                        //让一级分类所有选项都绑定点击事件
                        parentList[i].onclick = function () {

                            //一级分类按钮点击颜色渲染
                            $(this).addClass('active').siblings().removeClass('active');

                            //点击第几个元素就让它的Childen里的name遍历到二级分类
                            if (i > 0) {
                                showChildren(i - 1);
                            } else {
                                showChildren();
                            }

                            //获取一级分类按钮id值
                            if (i > 0) {
                                parentCategoryID = data[i - 1].id;
                                ID = parentCategoryID;
                            } else {
                                ID = '';
                            }
                            //将获取的id值赋值给info中的productCategoryId
                            info.productCategoryId = ID;
                            info.pageNum = 1;
                            //拿到新productCategoryId值后重新获取一次商品列表
                            getProductList();
                        }
                    }
                }, 50)
            });
            //默认遍历一级分类的第一个元素Childen里的name遍历到二级分类
            showChildren();
        }
    })
}

//请求品牌列表
getBrandList()

let brandData = "";

function getBrandList() {
    $.ajax({
        url: 'http://admin-api.macrozheng.com/brand/list',
        method: "GET",
        data: {pageNum: 1, pageSize: 100},
        headers: {
            Authorization: token2
        },
        success: function (res) {
            brandData = res.data.list;
            //渲染品牌内容
            let str = `<li class=\"active\">全部</li><span>|</span>`;
            for (let i = 0; i < brandData.length; i++) {
                let dataI = brandData[i];
                //循环遍历拼接元素
                str += `<li>${dataI.name}</li><span>|</span>`;
            }
            //js追加html完成后回调
            $('.brand').html(str).promise().done(function () {
                //获取品牌分类的全部li
                brandList = document.querySelectorAll(".brand>li");
                //需要延迟一下再去拿list的内容，否则没等挂载完数据便提前提取数据
                setTimeout(function () {
                    for (let i = 0; i < brandList.length; i++) {
                        brandList[i].index = i;
                        //让品牌分类所有选项都绑定点击事件
                        brandList[i].onclick = function () {

                            //品牌分类按钮点击颜色渲染
                            $(this).addClass('active').siblings().removeClass('active');

                            //获取品牌分类按钮id值
                            if (i > 0) {
                                brandID = brandData[i - 1].id;
                            } else {
                                brandID = '';
                            }
                            //将获取的id值赋值给info中的productCategoryId
                            info.brandId = brandID;
                            //因为切换分类会影响到一共有多少页，所以最好是把它当前页回归到第一页
                            info.pageNum = 1;
                            //拿到新productCategoryId值后重新获取一次商品列表
                            getProductList();
                        }
                    }
                }, 50)
            });

        }
    })
}

//2.请求商品列表，渲染页面
//2-1.准备请求用到的参数
const info = {
    pageNum: 1,
    pageSize: 8,
    brandId: '',
    productCategoryId: '',
}

//2-2.请求列表数据
getProductList()

//定义一个全局变量来获取请求数据后的总页数
let totalPage = 1;

function getProductList() {
    $.ajax({
        url: 'http://admin-api.macrozheng.com/product/list',
        method: "GET",
        data: info,
        headers: {
            Authorization: token2
        },
        success: function (res) {
            //执行页面渲染操作函数
            productHtml(res)

            //获取总页数
            totalPage = res.data.totalPage
        }
    })
}

//2-3.渲染页面
function productHtml(res) {
    //1.判断当前页如果是第一页，那么left按钮加上disab类名
    if (info.pageNum === 1) $('.left').addClass('disabled')
    else $('.left').removeClass('disabled')

    //2.判断当前页如果是最后一页，那么right按钮加上disab类名
    if (info.pageNum === res.data.totalPage) $('.right').addClass('disabled')
    else $('.right').removeClass('disabled')

    //3.渲染统计位置
    $('.totalPage').html(`${info.pageNum}/${res.data.totalPage}`)

    //4.渲染一页显示多少条
    $('select').val(`${info.pageSize}条/页`)

    //5.渲染当前页
    $('.pageInput').val(info.pageNum)

    //6.渲染商品列表
    let str = '';
    res.data.list.forEach(item => {
        str += `
            <li>
                <div class="show">
                    <img src="${item.pic}" alt="">
                </div>
                <div class="info">
                    <p class="title">${item.name}</p>
                    <p class="price">
                        <span class="current">￥${item.price}</span>
                        <span class="old">￥${item.originalPrice}</span>
                    </p>
                    <button>加入购物车</button>
                </div>
            </li>
        `
    })
    $('.list').html(str)
}

//3.搜索渲染
function getProductList_(sKey, brandId = '', productCategoryId = '', pageNum = 1, pageSize = 8) {
    $.ajax({
        url: encodeURI('http://admin-api.macrozheng.com/product/list?keyword=' + sKey +     ////将url进行encodeURI()编码
            '&pageNum=' + pageNum +
            '&pageSize=' + pageSize +
            '&productCategoryId=' + productCategoryId +
            '&brandId=' + brandId),
        method: "GET",
        headers: {
            Authorization: token2
        },
        success: function (res) {
            //执行页面渲染操作函数
            productHtml(res)

            //让所有全部都获得active类名
            firstActive(0)
        }
    })
}

$('.search').on('click', 'span', function () {
    //1.修改info里面的数据
    let arg = $('.search-input').val().trim();    //trim()删除空白符
    info.pageNum = 1;

    getProductList_(arg);
})

//4.页面切换渲染
$('.left').on('click', function () {
    if ($('.left').hasClass('disabled')) return;
    info.pageNum--;
    getProductList();
})


$('.right').on('click', function () {
    if ($(this).hasClass('disabled')) return;
    info.pageNum++;
    getProductList();
})

//5.一页多少条渲染
$('select').on('change', function () {
    info.pageSize = $(this).val().replace(/[^\d.]/g, "")   //str.replace(/[^\d.]/g,"")：Jquery只保留数字和小数点(正则)
    info.pageNum = 1;
    getProductList()
})

//跳转渲染
$('.jump').on('click', function () {
    info.pageNum = $('.pageInput').val()
    //判断小于1，只取1
    if (info.pageNum <= 1) info.pageNum = 1;
    //判断大于总页数，只取总页数
    if (info.pageNum >= totalPage) info.pageNum = totalPage;
    getProductList()
})